<template>
  <div>
    <div class="main">
      <div class="tou">
        <img src="../../assets/tou.png" alt />
        <div class="tou-hander">
          <div>{{username}}</div>
          <div>我的积分：</div>
        </div>
      </div>
    </div>
    <div class="order-name-wrap">
      <div class="order-name">全部订单</div>
      <div class="show-order">查看全部订单</div>
    </div>
    <div class="order-status-wrap">
      <div class="item">
        <div class="icon wait"></div>
        <div class="text">待支付</div>
      </div>
      <div class="item">
        <div class="icon take"></div>
        <div class="text">待收货</div>
      </div>
      <div class="item">
        <div class="icon comment"></div>
        <div class="text">待评价</div>
      </div>
    </div>
    <div class="menu-list-wrap">
      <ul>
        <li>个人资料</li>
        <li class="iconfont icon-jiantou"></li>
      </ul>
      <ul>
        <li>收货地址</li>
        <li class="iconfont icon-jiantou"></li>
      </ul>
      <ul>
        <li>绑定手机</li>
        <li class="iconfont icon-jiantou"></li>
      </ul>
      <ul>
        <li>修改密码</li>
        <li class="iconfont icon-jiantou"></li>
      </ul>
      <ul>
        <li>我的收藏</li>
        <li class="iconfont icon-jiantou"></li>
      </ul>
      <div class="btn" @click="goLogin" v-if="isShow">登录/注册</div>
      <div class= "btn" v-else @click="exit">退出</div>
    </div>
  </div>
</template>
<script>
// import headers from '../../components/Headers'
export default {
  data(){
return{
    username:'',
  isShow:true
}
  },
  mounted(){
this.pan()
this.initData()
  },
  methods: {
    exit(){
      sessionStorage.removeItem("token")
      this.$store.dispatch("setValue")
      this.$router.push({path:"/login"})
    },
    goLogin () {
      this.$router.push('login')
    },
    pan(){
      console.log(this.$store)
      if(this.$store.state.token){

        this.isShow = false
      }else{
        this.isShow = true
      }
    },
    initData(){
   console.log("eeeee",this.$router)
      this.username = this.$router.currentRoute.query.username 
    }
  }
}
</script>
<style lang="scss" scope>
.main {
  background: red;
  margin-top: 5rem;
  height: 13rem;
}
.tou {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tou img {
  width: 5rem;
  height: 5rem;
  border-radius: 100%;
  margin-top: 5rem;
  margin-left: 1rem;
}
.tou-hander {
  margin-right: 23rem;
  margin-top: 6rem;
  font-size: 0.9rem;
  color: white;
}
.order-name-wrap {
  height: 3.8rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.order-status-wrap {
  height: 6.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-list-wrap {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
}
.menu-list-wrap ul {
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
}
.btn {
  display: flex;
  width: 75%;
  height: 5rem;
  background: red;
  margin: 0 auto;
  margin-top: 3.8rem;
  // text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
}
</style>
